<template>
  <el-dialog
    width="630px"
    title="补货详情"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    v-model="visible"
    @close="cancel"
    @open="open"
  >
    <el-scrollbar class="scrollbar" style="height: 330px">
      <el-table
        style="width: 568px; margin: 0 auto"
        :data="channelList"
        :header-cell-style="{
          'line-height': '1.15',
          padding: '10px 0 9px',
          background: '#F3F6FB',
          'font-weight': '500',
          'text-align': 'left',
          color: '#666666',
        }"
        :cell-style="{
          height: '44px',
          padding: '2px 0',
          'text-align': 'left',
          color: '#666666',
        }"
      >
        <el-table-column label="货道编号">
          <template #default="scope">
            {{ scope.row.channelCode }}
          </template>
        </el-table-column>

        <el-table-column label="商品名称">
          <template #default="scope">
            {{ scope.row.skuId && scope.row.sku.skuId? scope.row.sku.skuName : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="当前数量">
          <template #default="scope">
            {{ scope.row.skuId && scope.row.sku.skuId? scope.row.currentCapacity : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="还可添加">
          <template #default="scope">
            {{ scope.row.skuId && scope.row.sku.skuId? getAvailableCapacity(scope.row) : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="补满数量" width="200">
          <template #default="scope">
            <el-input-number
              v-if="scope.row.skuId && scope.row.sku.skuId"
              v-model="scope.row.expectCapacity"
              controls-position="right"
              :min="0"
              :max="getAvailableCapacity(scope.row)"
              label="补满数量"
              style="width: 100%"
              placeholder="请输入"
            />
            <span v-else>货道暂无商品</span>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
    <div class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="ensureDialog">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { watch } from 'vue';
// import { getGoodsList } from '@/api/manager/channel';

export default {
  name: 'Task',
  props: {
    channelVisible: {
      type: Boolean,
      default: false
    },
    innerCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      channelList: [],
      detailList: []
    };
  },
  watch: {
    channelVisible(val) {
      if (val) {
        this.visible = val;
        this.open();
      }
    }
  },
  methods: {
    open() {
      this.getChannelList();
    },
    getAvailableCapacity(channel) {
      let availableCapacity = channel.maxCapacity - channel.currentCapacity;
      return availableCapacity > 0 ? availableCapacity : 0;
    },
    // getChannelList() {
    //   getGoodsList(this.innerCode).then(response => {
    //     this.channelList = response.data || [];
    //     this.channelList.forEach(channel => {
    //       channel.expectCapacity = channel.sku !== null
    //         ? channel.maxCapacity - channel.currentCapacity
    //         : 0;
    //     });
    //   });
    // },
    ensureDialog() {
      this.cancel();
      this.detailList = [];
      this.channelList.forEach(ele => {
        if (ele.sku && ele.sku.skuId && ele.expectCapacity > 0) {
          this.detailList.push({
            channelCode: ele.channelCode,
            expectCapacity: ele.expectCapacity,
            skuId: ele.skuId,
            skuName: ele.sku ? ele.sku.skuName : '',
            skuImage: ele.sku ? ele.sku.skuImage : ''
          });
        }
      });
      this.$emit('getDetailList', this.detailList);
    },
    cancel() {
      this.visible = false;
      this.detailList = [];
      this.$emit('handleClose');
    }
  }
};
</script>
